body {
    margin: 0;
    padding: 0;
    background: #cdcdcd;
}
ul {
    list-style: none;
    padding: 0;
}


header form {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: .8em 20%;
    background: rgba(47, 47, 47, .98);
}
.header-label {
    flex: 1 1 20%;
    font-size: 1.3em;
    color: #ddd;
}
.header-input {
    flex: 1 1 40%;
    padding: .3em;
    border: none;
    border-radius: .3em;
    /* font-size: 1em; */
    text-indent: .5em;
    box-shadow:  1px 0 rgba(255,255,255,0.24),
                 0 1px 6px rgba(0,0,0,0.45) inset;
}


main {
    padding: 1em 20%;
}
.doing-head, .done-head {
    position: relative;
    margin: 1.3em 0;
    font-weight: bold;
    user-select: none;
}
.head-text {
    font-size: 1.5em;
}
.head-num {
    position: absolute;
    top: .2em;
    right: .2em;
    width: 1.2em;
    height: 1.2em;
    text-align: center;
    border-radius: 50%;
    font-size: 1.3em;
    font-weight: bold;
    font-family: monospace;
    color: #666;
    background: #e6e6fa;
    user-select: none;
}
.todo-list-item {
    position: relative;
    border-radius: .2em;
    margin: .5em 0;
    border-left: .3em solid #629a9c;
    background: white;
}
.item-check {
    float: left;
    width: 1.5em;
    height: 1.5em;
    margin: .4em .8em 0 1em;
    cursor: pointer;
}
.item-content-input {
    padding: .3em 0;
}
.item-content-p {
    padding: .3em 0;
}
.item-delete {
    position: absolute;
    top: .2em;
    right: .2em;
    width: 1.2em;
    height: 1.2em;
    text-align: center;
    border: 2px solid white;
    border-radius: 50%;
    color: white;
    background: #ccc;
    cursor: pointer;
    user-select: none;
}
.done .todo-list-item {
    opacity: .5;
}


footer {
    text-align: center;
    font-size: .9em;
    color: #666;
}
.author {
    margin: 0 .5em;
    text-decoration: none;
    color: teal;
}
.clear-todo {
    font-size: 1.1em;
    color: #555;
    cursor: pointer;
    user-select: none;
}